<template>
  <div v-if="sample || template" class="mr-10" @click="toClick">
    <nut-button v-if="sample" size="small" type="primary" color="#3d8ffd" plain>查看样例</nut-button>
    <nut-button v-else-if="template" size="small" type="primary" color="#3d8ffd" plain>下载模板</nut-button>
  </div>
  <nut-popup position="center" :style="{ width: '80%' }" v-model:visible="showTop">
    <img :src="previewImgSrc" class="w-full" alt="" @click="showTop = false">
  </nut-popup>
</template>

<script setup>
import { showToast } from '@nutui/nutui';
import { defineProps } from 'vue'
const props = defineProps({
  type: {
    type: String,
    required: true
  },
  sample: {
    type: String,
    required: false
  },
  template: {
    type: String,
    required: false
  },
})
let previewImgSrc = ref('')
let showTop = ref(false)
const toClick = () => {
  if (props.type === 'sample') {
    previewImg(props.sample)
  } else if (props.type === 'template') {
    downLoad(props.template)
  }
}
const previewImg = (url) => {
  previewImgSrc.value = url
  showTop.value = true
}
const downLoad = (url) => {
  var active = document.createElement('a')
  active.href = url
  document.body.appendChild(active)
  active.click()
  showToast.text('正在下载,请前往下载内容查看');
}

</script>

<style lang="scss" scoped>
</style>